<template>
	<view class="container">
		<view class="header">
			<uni-list :border="false">
				<uni-list-item style="background-color: #0D7AF7;">
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" src="/static/图层 3@2x.png" mode="widthFix"></image>
						</view>
					</template>
					<template v-slot:body>
						<text class="slot-text">xxx修车厂，欢迎您</text>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-grid :column="2" :highlight="true" @change="change" :square="false" :show-border="false">
				<navigator url="/pages/index/verification/verification" hover-class="none" class="grid-item-box">
					<uni-icons type="scan" :size="30" color="#777" />
					<text class="text">扫码核销</text>
				</navigator>
				<navigator url="/pages/index/verification/enter/enter" class="grid-item-box grid-item-box_input"
					hover-class="none">
					<uni-icons type="compose" :size="30" color="#777" />
					<text class="text">输入核销码</text>
				</navigator>
			</uni-grid>
		</view>
		<view class="list">
			<uni-grid :column="3" :highlight="true" @change="change" :square="false" :show-border="false">
				<uni-grid-item>
					<navigator url="/pages/index/count/count" class="grid-item-list" style="background-color: #fff;">
						<!-- <uni-icons type="image" :size="30" color="#777" /> -->
						<image src="/static/manageChart.png" />
						<text class="text">经营统计</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="/pages/index/record/record" class="grid-item-list" style="background-color: #fff;">
						<image src="/static/record.png" />
						<text class="text">核销记录</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="/pages/index/payments/payments" class="grid-item-list"
						style="background-color: #fff;">
						<image src="/static/detailed.png" />
						<text class="text">收支明细</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="/pages/index/orders/orders" class="grid-item-list" style="background-color: #fff;">
						<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="100" absolute="rightTop"
							size="small">
							<image src="/static/order.png" />
						</uni-badge>
						<text class="text">订单管理</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="/pages/index/coupons/coupons" class="grid-item-list" style="background-color: #fff;">
						<image src="/static/coupon.png" />
						<text class="text">卡券管理</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="/pages/index/repair/repair" hover-class="no-shadow" class="grid-item-list"
						style="background-color: #fff;">
						<uni-badge class="uni-badge-left-margin" :is-dot="true" :text="100" absolute="rightTop"
							size="small">
							<image src="/static/maintenance.png" />
						</uni-badge>
						<text class="text">维修任务</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="/pages/index/evaluate/evaluate" class="grid-item-list"
						style="background-color: #fff;">
						<uni-icons type="starhalf" :size="30" color="#279CFF" />
						<text class="text">评价管理</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="/pages/index/information/information" class="grid-item-list"
						style="background-color: #fff;">
						<image src="/static/information.png" style="width: 65rpx;" />
						<text class="text">客户资料</text>
					</navigator>
				</uni-grid-item>
				<uni-grid-item>
					<navigator url="/pages/index/activity/activity" class="grid-item-list"
						style="background-color: #fff;">
						<image src="/static/activity.png" />
						<text class="text">活动发布</text>
					</navigator>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view>
			<view class="notice">
				<view class="image">
					<image src="/static/notice.png" />
					<view>最新通知</view>
				</view>
				<navigator url="/pages/index/repair/repair" hover-class="none">今日需上门取车任务共32单>></navigator>
			</view>
		</view>
		<view>
			<view class="uni-container">
				<uni-table ref="table" @selection-change="selectionChange">
					<uni-tr>
						<uni-th width="100" align="center">用户</uni-th>
						<uni-th width="150" align="center">服务项目</uni-th>
						<uni-th width="100" align="center">时间</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in tableData" :key="index">
						<uni-td align="center">
							<view class="name">{{ item.name }}</view>
						</uni-td>
						<uni-td align="center">{{ item.address }}</uni-td>
						<uni-td>{{ item.date }}</uni-td>
					</uni-tr>
				</uni-table>
				<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
						:total="total" @change="change" /></view>
			</view>
		</view>
	</view>
</template>

<script>
	import tableData from '../js/tableData.js'
	export default {
		components: {},
		data() {
			return {
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				searchVal: '',
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false
			};
		},
		onLoad() {
			this.selectedIndexs = []
			this.getData(1)
		},
		methods: {
			onClick(e) {
				console.log('执行click事件', e.data)
				uni.showToast({
					title: '点击反馈'
				});
			},
			switchChange(e) {
				uni.showToast({
					title: 'change:' + e.value,
					icon: 'none'
				});
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
			//批量删除
			delTable() {
				console.log(this.selectedItems())
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current)
			},
			// 搜索
			search() {
				this.getData(1, this.searchVal)
			},
			// 获取数据
			getData(pageCurrent, value = '') {
				this.loading = true
				this.pageCurrent = pageCurrent
				this.request({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					value: value,
					success: res => {
						// console.log('data', res);
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					}
				})
			},
			// 伪request请求
			request(options) {
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options
				let total = tableData.length
				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})
				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data,
							total: total
						})
				}, 500)
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.header {
		width: 100%;
		height: 376rpx;
		// background-color: #0D7AF7;
	}

	.uni-list-item__container {
		background-color: #0D7AF7;
	}

	.slot-image {
		width: 158rpx;
		height: 158rpx;
		margin: 60rpx 48rpx 98rpx 46rpx;
	}

	.slot-text {
		width: 246rpx;
		height: 40rpx;
		margin-top: 82rpx;
		color: #fff;
		font-size: 28rpx;
	}

	//扫码
	.header .uni-grid-wrap {
		width: 750rpx;
		position: absolute;
		top: 280rpx;
	}

	.header .grid-item-box {
		background-color: #fff;
		margin-left: 38rpx;
		width: 314rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 12rpx;
		border: 2rpx solid #BBBBBB;
	}

	.header .grid-item-box_input {
		margin-left: 38rpx;
	}

	.uniui-scan,
	.uniui-image {
		vertical-align: middle;
	}

	.uniui-compose {
		vertical-align: middle;
	}

	.text {
		margin-left: 20rpx;
		vertical-align: middle;
	}

	//
	.list {
		background-color: #fff;
		padding-top: 20rpx;
	}

	image {
		width: 48rpx;
		height: 48rpx;
	}

	.grid-item-list {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.list .uni-icons {
		margin-bottom: 10rpx;
	}

	//通知
	.notice {
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
	}

	.image {
		display: flex;
	}

	.image>img {
		vertical-align: middle;
	}

	.image>view {
		margin-left: 8rpx;
		vertical-align: middle;
		font-weight: bold;
	}

	.notice>navigator{
		color: #ff0000;
	}

	//表格
	.uni-group {
		display: flex;
		align-items: center;
	}
</style>